<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { HomeFilled, Calendar, Guide, User } from '@element-plus/icons-vue'

// 当前激活的路由
const activeIndex = ref('home')
const route = useRoute()
const router = useRouter()

// 监听路由变化，更新激活状态
watch(() => route.path, (newPath) => {
  switch (newPath) {
    case '/main/home':
      activeIndex.value = 'home'
      break
    case '/main/reserveCourse':
      activeIndex.value = 'reserve'
      break
    case '/main/myCourse':
      activeIndex.value = 'mycourse'
      break
    case '/main/mine':
      activeIndex.value = 'mine'
      break
    default:
      activeIndex.value = 'home'
  }
}, { immediate: true })

// 导航方法
const navigateTo = (index: string) => {
  activeIndex.value = index
  switch (index) {
    case 'home':
      router.push('/main/home')
      break
    case 'reserve':
      router.push('/main/reserveCourse')
      break
    case 'mycourse':
      router.push('/main/myCourse')
      break
    case 'mine':
      router.push('/main/mine')
      break
    default:
      router.push('/main/home')
  }
}
</script>

<template>
  <div class="main-container">
    <!-- 主要内容区域 -->
    <div class="content">
      <router-view>

      </router-view>
    </div>

    <!-- 底部导航栏 -->
    <div class="tab-bar">
      <div
          class="tab-item"
          :class="{ active: activeIndex === 'home' }"
          @click="navigateTo('home')"
      >
        <el-icon :size="20"><HomeFilled /></el-icon>
        <span>首页</span>
      </div>

      <div
          class="tab-item"
          :class="{ active: activeIndex === 'reserve' }"
          @click="navigateTo('reserve')"
      >
        <el-icon :size="20"><Calendar /></el-icon>
        <span>预约课程</span>
      </div>

      <div
          class="tab-item"
          :class="{ active: activeIndex === 'mycourse' }"
          @click="navigateTo('mycourse')"
      >
        <el-icon :size="20"><Guide /></el-icon>
        <span>我的课程</span>
      </div>

      <div
          class="tab-item"
          :class="{ active: activeIndex === 'mine' }"
          @click="navigateTo('mine')"
      >
        <el-icon :size="20"><User /></el-icon>
        <span>个人中心</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.main-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
  box-sizing: border-box;
}

.content {
  flex: 1;
  overflow-y: auto;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #fff;
  display: flex;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #666;
  cursor: pointer;
}

.tab-item.active {
  color: #409eff;
}

.tab-item i {
  font-size: 20px;
  margin-bottom: 4px;
}
</style>
